<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        div{
            width: 360px;
            height: 70px;
            padding-top: 360px;
            border: 1px solid #ccc;
            margin: 100px auto;
            background: url(images/01big.jpg)no-repeat;
            overflow: hidden;
        }
        ul{
            overflow: hidden;
            list-style: none;
            border-top: 1px solid #cccccc;
        }
        ul li{
            float: left;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function() {
            /* var box = document.getElementById("box");
            var pic1 = document.getElementById("pic1");
            var pic2 = document.getElementById("pic2");
            var pic3 = document.getElementById("pic3");
            var pic4 = document.getElementById("pic4");
            var pic5 = document.getElementById("pic5");
            pic2.onclick = function(){
                box.style.backgroundImage = " url(images/02big.jpg)";
            }*/

            function fu(pic,bg){
                var box = document.getElementById("box");
                var pic = document.getElementById(pic);
                pic.onmousemove = function(){
                    box.style.backgroundImage = bg;
                }
            }
            fu("pic1"," url(images/01big.jpg)");
            fu("pic2"," url(images/02big.jpg)");
            fu("pic3"," url(images/03big.jpg)");
            fu("pic4"," url(images/04big.jpg)");
            fu("pic5"," url(images/05big.jpg)");
        }
    </script>
</head>
<body>
    <div  id="box">
       <ul>
           <li id="pic1"><img src="images/01.jpg" alt=""></li>
           <li id="pic2"><img src="images/02.jpg" alt=""></li>
           <li id="pic3"><img src="images/03.jpg" alt=""></li>
           <li id="pic4"><img src="images/04.jpg" alt=""></li>
           <li id="pic5"><img src="images/05.jpg" alt=""></li>
       </ul>

    </div>
</body>
</html>